$(document).ready( function() {
	
	// als de localstorage een username en wachtwoord heeft verifeer dit tegen de webservice
	if( getUsername() != '' && getPassword() != '' ) {
		checkStoredLogin( getUsername(), getPassword() );
	}
	
	function getTableInfo( tableId ) {
		$.getJSON( 'http://localhost:8080/WT_Roulette/rest/lobby/tableInfo/' + tableId, function(data) {
			// oldschool html tables, i love me some tables...
			var playerHTMLTable = "<table><tr><th>Player</th><th>Amount of cash</th></tr>";
			var tableId = data['tableId'];
			var playersOnTable = data['players'];
			var goToTableHTML = "<button id='goToTableButton' onclick='joinTable(";
			
			// itereer over alle spelers en toon ze in een html table :)
			for( var i = 0; i < playersOnTable.length; i++ ) {
				playerHTMLTable += "<tr><td>" + playersOnTable[i].username + "</td><td>" + playersOnTable[i].amountOfCash + "</td></tr>";
			}
			playerHTMLTable += "</table>";
			
			// update de gegevens voor elke tafel en geef de mogelijk om bij deze tafel aan te schuiven
			if( checkLogin() ) {
				goToTableHTML += tableId + ")'>Go to table " + tableId + "</button>";
				$('#tableInfoDetail').html("<h3> TableId: " + tableId + "</h3><br/>" + playerHTMLTable + "<br/>" + goToTableHTML );
			} else {
				$('#tableInfoDetail').html("<h3> TableId: " + tableId + "</h3><br/>" + playerHTMLTable );
			}
		} );
	}
	
	// Wanneer op div table<id> wordt geklikt voer dan methode getTableInfo(id) uit!
	$('#table1').click( function() {
		getTableInfo(1);
	});
	$('#table2').click( function() {
		getTableInfo(2);
	});
	$('#table3').click( function() {
		getTableInfo(3);
	});
	$('#table4').click( function() {
		getTableInfo(4);
	});
	$('#table5').click( function() {
		getTableInfo(5);
	});
	$('#table6').click( function() {
		getTableInfo(6);
	});
});

function checkStoredLogin( username, password ) {
	$.getJSON('http://localhost:8080/WT_Roulette/rest/lobby/login?username=' + username + "&password=" + password, function(data) {
		var username = data["username"];
		var cash = data['amountOfCash'];
		if( username != null && cash != null ) {
			buildLoggedOnText( username, cash );
			$('#login').hide();
			$('#loggedOn').show();
		} else {
			alert( 'Failed to log in, please try again' );
		}
	});
}

function login(){
	$.getJSON('http://localhost:8080/WT_Roulette/rest/lobby/login?username=' + $('#username').val() + "&password=" + $('#password').val(), function(data) {
		var username = data['username'];
		var cash = data['amountOfCash'];
		if(username && cash != null){
			buildLoggedOnText(username, cash);
			$('#login').hide();
			$('#loggedOn').show();
			$('#TableInfo1').html("Select a table!");
		} else {
			alert('Failed to log in, please try again');
		}
		setLogin(username, $('#password').val());
		
		setId(data['playerId']);
	});
}

function buildLoggedOnText(username, cash){
	var loggedOnText = "Username: " + username + "<br/>Cash: " + cash + "<br/><button onClick='logout()' id='logoutButton'>Log out!</button>";
	$('#loggedOn').html(loggedOnText);
}

function logout() {
	clearLogin();
	$('#loggedOn').hide();
	
	// reset input fields!
	$('#login').show();
	$('#username').val("");
	$('#password').val("");
	$('#goToTableButton').hide();
}

function joinTable( tableId ) {
	$.ajax({
		type: 'POST',
		url: 'http://localhost:8080/WT_Roulette/rest/table',
		data: {
			'tableId': tableId,
			'playerId': getId()
		},
		success: function () {
			// go to
			window.location.href = "table.html?tableId=" + tableId;
		},
		error: function(result, ajaxOptions, thrownError) {
			alert("Errormessage: " + result.status);
			alert(thrownError);
		}
	});
}